<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>分析生命周期</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root" :x="n">
		<h2 v-text="n"></h2>
		<h2>当前的n值是：{{n}}</h2>
		<button @click="add">点我n+1</button>
		<button @click="bye">点我销毁vm</button>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el: '#root',
		// template:`
		// 	<div>
		// 		<h2>当前的n值是：{{n}}</h2>
		// 		<button @click="add">点我n+1</button>
		// 	</div>
		// `,
		data: {
			n: 1
		},
		methods: {
			add() {
				console.log('add')
				this.n++
			},
			bye() {
				console.log('bye')
				this.$destroy()
			}
		},
		watch: {
			n() {
				console.log('n变了')
			}
		},
		beforeCreate() {
			// 此时:无法通过vm访问到data中的数据、methods中的方法。
			console.log('beforeCreate')
			// debugger;  // 断点调试
		},
		created() {
			// 此时:可以通过vm访问到data中的数据、methods中配置的方法。
			console.log('created')
			// debugger;
		},
		beforeMount() {
			// 此时:1.页面呈现的是未经Vue编译的DOM结构。2.所有对DOM的操作，最终都不奏效。
			console.log('beforeMount')
			// debugger;
		},
		mounted() {
			// 此时:1.页面中呈现的是经过Vue编译的DOM.2.对DOM的操作均有效（(尽可能避免)。至此初始化过程结束，一般在此进行:开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作。
			console.log('mounted')
			// debugger;
		},
		beforeUpdate() {
			// 此时:数据是新的，但页面是旧的，即:页面尚未和数据保持同步。
			// 对数据的更改不会刷新
			console.log('beforeUpdate')
			// debugger;
		},
		updated() {
			// 此时:数据是新的，页面也是新的，即:页面和数据保持同步。
			console.log('updated')
			// debugger;
		},
		beforeDestroy() {
			// 此时: vm中所有的: data、methods、指令等等，都处于可用状态，马上要执行销毁过程,一般在此阶段:关闭定时器、取消订阅消息.解绑自定义事件等收尾操作
			// 对数据的更改不会刷新
			console.log('beforeDestroy')
			// debugger;
		},
		destroyed() {
			// 此时: vm中所有的: data、methods、指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段:关闭定时器、取消订阅消息、解绑自定义事件等收尾操作
			console.log('destroyed')
			// debugger;
		},
	})
</script>

</html>